# Component: List Toolbar

Unified filtering, sorting, and search management

Control Block

![[Pasted image 20260426085540.png]]

### BEM Anatomy

| Type      | Class Name             | Description                                                                             |
| --------- | ---------------------- | --------------------------------------------------------------------------------------- |
| ==Block== | `.as-list-toolbar`     | The main row container. Resets gutters via SCSS variables.                              |
| Element   | `__filter`             | Left-hand container for view switches and ordering actions. Uses `flex: space-between`. |
| Element   | `__actions`            | Inner wrapper for sort and date groups with a 0.25 spacer gap.                          |
| Element   | `__view-switch`        | Container for List/Grid toggle buttons.                                                 |
| Element   | `__search`             | Right-hand container for the search input group.                                        |
| Element   | `__search-input`       | The text input field for searching; handles custom focus states and inner padding.      |
| Element   | `__search-btn`         | Base class for buttons within the search group (Clear or Submit).                       |
| Modifier  | `__search-btn--clear`  | Styles the "reset" button, often removing borders or using a subtle gray icon.          |
| Modifier  | `__search-btn--submit` | Styles the "execute search" button, usually with a theme-primary background.            |
| Element   | `__button`             | The general button base for toolbar interactions.                                       |
| Modifier  | `__button--list`       | Contextual modifier for the list-view toggle button.                                    |
| Modifier  | `__button--grid`       | Contextual modifier for the grid-view toggle button; active when items are in cards.    |
| Element   | `__order-group`        | Wrapper for sort-specific triggers, keeping the label and direction button together.    |
| Element   | `__order-button`       | The trigger for changing sorting direction (Alphabetical, Date, etc.).                  |
| Modifier  | `__order-button--desc` | Active state indicating descending order (e.g., Z-A, Newest First).                     |
| Modifier  | `__order-button--asc`  | Active state indicating ascending order (e.g., A-Z, Oldest First).                      |
| Modifier  | `__order-button--none` | Default state when no specific ordering is applied to the current column.               |
| Element   | `__date-picker`        | High-level wrapper for the date selection utility.                                      |
| Element   | `__date-input`         | The hidden or visible input field that holds the raw date value for form submission.    |
| Element   | `__date-button`        | The visual trigger (often an icon) that opens the calendar dropdown or modal.           |

### Functional Layout

The toolbar divides functionality into two main 6-column regions on medium viewports and above. Buttons utilize the `Outline` property to indicate "Active" states dynamically based on the current model.

##### Generated HTML (Full Config)

```html
<div class="as-list-toolbar row">
    <!-- Filter Section -->
    <div class="as-list-toolbar__filter col-md-6">
        <div class="as-list-toolbar__view-switch">
            <div class="input-group">
                <button class="as-list-toolbar__button--list btn btn-primary">...</button>
            </div>
        </div>
        <div class="as-list-toolbar__actions">
            <div class="as-list-toolbar__order-group input-group">...</div>
        </div>
    </div>

    <!-- Search Section -->
    <div class="as-list-toolbar__search col-md-6">
        <div class="input-group">
            <input class="as-list-toolbar__search-input form-control" />
            <button class="as-list-toolbar__search-btn--submit btn">...</button>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-list-toolbar {
  --bs-gutter-x: 1rem;
  
  &__filter {
    // Pushes actions to the right of switches
    display: flex;
    justify-content: space-between;
  }
  
  &__actions {
    display: flex;
    gap: 0.25rem; // Tight spacing for action clusters
  }

  &__search-btn {
    // Increased clickable area for search
    padding: 0 1rem;
  }
}
```
